    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@include file="../common/header.jsp"%>
            <div class="easyui-layout" data-options="fit:true">
            <!-- Begin of toolbar -->
            <div id="wu-toolbar">
            <div class="wu-toolbar-button">
                <%@include file="../common/menus.jsp"%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>--%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>--%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>--%>
            </div>
            <div class="wu-toolbar-search">

            <label>角色名称：</label><input  id="search-name" class="wu-text" style="width:100px">
            <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
            </div>
            </div>
            <!-- End of toolbar -->
            <%-- 列表显示       --%>
            <table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar"></table>
            </div>
            <!-- Begin of easyui-dialog -->
        <%-- 添加页面       --%>
        <div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="add-form" method="post">
        <table>
        <tr>
        <td width="60" align="right">角色名称:</td>
        <td><input type="text" name="name" class="wu-text" /></td>
        </tr>
            <tr>
                <td valign="top" align="right">角色备注:</td>
                <td><textarea name="remark" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
            </tr>
        </table>
        </form>
        </div>
        <%-- 修改页面       --%>
        <div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="edit-form" method="post">
        <input type="hidden" id="edit-id" name="id">
        <table>
        <tr>
        <td width="60" align="right">角色名称:</td>
        <td><input type="text" id="edit-name" name="name" class="wu-text" /></td>
        </tr>
            <tr>
                <td valign="top" align="right">角色备注:</td>
                <td><textarea id="edit-remark" name="remark" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
            </tr>
        </table>
        </form>
        </div>
        <!-- 编辑权限弹窗 -->
        <div id="select-authority-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:220px;height:350px; padding:10px;">
            <ul id="authority-tree"  checkbox="true"></ul>

        </table>
        </div>
    <%@include file="../common/footer.jsp"%>

    <!-- End of easyui-dialog -->
            <script type="text/javascript">
            /**
            * Name 添加记录
            */
            function add(){
            var data = $("#add-form").serialize();
            $.ajax({
            url:'../../admin/role/add',
            dataType:'json',
            type:'post',
            data:data,
            success:function(data){
            if(data.type == 'success'){
            $.messager.alert('信息提示','添加成功！','info');

            $('#add-dialog').dialog('close');
            $('#data-datagrid').datagrid('reload');
            }else{
            $.messager.alert('信息提示',data.msg,'info');
            }
            }
            });
            }

            //选择权限弹窗
            function selectAuthority(roleId){
            if($("#authority-table").children().length <= 0){
            $.ajax({
            url:'../../admin/role/getAllMenu',
            dataType: 'json',
            type: 'post',
            success:function(data) {
            if(data.type=='success'){

            }else {
            //$.messager.alert('信息提示',data.msg,'warning');
            }
            }
            });
            }
            $('#select-authority-dialog').dialog({
            closed: false,
            modal:true,
            title: "选择权限信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: function () {
                var nodes = $('#authority-tree').tree('getChecked');
                var ids='';
                for(var i=0;i<nodes.length;i++){
                    ids += nodes[i].id+',';
                }
                var parentNodes = $('#authority-tree').tree('getChecked','indeterminate');
                for(var i=0;i<parentNodes.length;i++){
                    ids += parentNodes[i].id+',';
                }
                //console.log(ids);
                if(ids!=''){
                    // var item = $('#data-datagrid').datagrid('getSelected');//获取选中的那一行
                    // if(item==null||item.length==0){
                    //     $.messager.alert('提示信息','请选择要编辑的角色','info');
                    //     return;
                    // }
                    $.ajax({
                        url:'addAuthority',
                        dataType:'json',
                        type:'post',
                        data:{ids:ids,roleId:roleId},
                        success:function (data) {
                            if(data.type=='success'){
                            $.messager.alert('提示信息','编辑成功！','info');
                            $('#select-authority-dialog').dialog('close');
                        }else{
                            $.messager.alert('提示信息',data.msg,'info')
                        }}
                    })
                }else{
                    $.messager.alert('信息提示','请至少选择一条权限！','info');
                }
            }
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#select-authority-dialog').dialog('close');
            }
            }],
                onBeforeOpen:function () {
                    // var item = $('#data-datagrid').datagrid('getSelected');//获取选中的那一行
                    // if(item==null||item.length==0){
                    //     $.messager.alert('提示信息','请选择要编辑的角色','info');
                    //     return;
                    // }
                    $.ajax({
                        url:'findListByRoleId',
                        dataType:'json',
                        type:'post',
                        data:{roleId: roleId},
                        success:function (data) {
                            existAuthority = data;
                            $("#authority-tree").tree({
                                url: 'getAllMenu',
                                loadFilter: function(rows){
                                    return convert(rows);
                                }
                            });

                        }
                    })
                }
            });
            }

            //某个角色已经拥有的权限
            var existAuthority = null;
            function isAdded(row,rows){
                for(var k=0;k<existAuthority.length;k++){
                    if(existAuthority[k].menuId == row.id && haveParent(rows,row.parentId)){
                        return true;
                    }
                }
                return false;
            }
            //之前问题：想只选中子节点中某个权限时，父分类也会被选中，即全选状态
            //解决办法：（即让其父分类不选中）
            //优化后：单选子节点权限框（想只选中子节点中某个权限，即非全选状态）
            //判断是否有父分类
           //双层判断1.是否有父分类，没有即顶级菜单，返回false，不选中；有则进行2判断
            //      2.父分类的父分类是否为0（顶级菜单），是0（顶级菜单），说明其是二级菜单，返回false，不选中；不是0，则选中
            function haveParent(rows,parentId){
                for(var i=0; i<rows.length; i++){
                    //
                    if (rows[i].id == parentId){
                        if(rows[i].parentId != 0)//有父分类再判断其父分类是不是0（顶级菜单），
                            return true;
                    }
                }
                return false;
            }
            /**
             * //转换原始数据至符合tree的要求(详见EasyUI教程：EasyUI 树形菜单加载父/子节点)
             */
            // $('#authority-tree').tree({
            //     url: 'getAllMenu',
            //     loadFilter: function(rows){
            //         return convert(rows);
            //     }
            // });
            //判断是否有父类
            function convert(rows){
                function exists(rows, parentId){
                    for(var i=0; i<rows.length; i++){
                        if (rows[i].id == parentId) return true;
                    }
                    return false;
                }

                var nodes = [];
                // get the top level nodes
                //首先获取所有的父分类
                for(var i=0; i<rows.length; i++){
                    var row = rows[i];
                    if (!exists(rows, row.parentId)){
                        nodes.push({
                            id:row.id,
                            text:row.name
                        });
                    }
                }

                var toDo = [];
                for(var i=0; i<nodes.length; i++){
                    toDo.push(nodes[i]);
                }
                while(toDo.length){
                    var node = toDo.shift();	// the parent node
                    // get the children nodes
                    for(var i=0; i<rows.length; i++){
                        var row = rows[i];
                        if (row.parentId == node.id){
                            var child = {id:row.id,text:row.name};
                            if(isAdded(row,rows)){//新加的
                                child.checked = true;
                            }
                            if (node.children){
                                node.children.push(child);
                            } else {
                                node.children = [child];
                            }
                            //把刚才创建的孩子再添加到父分类的数组中
                            toDo.push(child);
                        }
                    }
                }
                return nodes;
            }



            /**
            * Name 修改记录
            */
            function edit(){
            var data = $("#edit-form").serialize();
            $.ajax({
            url:'../../admin/role/edit',
            dataType:'json',
            type:'post',
            data:data,
            success:function(data) {
                if(data.type == 'success'){
                    $.messager.alert('信息提示','修改成功！','info');
                    $("#edit-dialog").dialog('close');
                    $("#data-datagrid").datagrid('reload');
        }else {
                   $.messager.alert('提示信息',data.msg,'info');
        }

        }

            });
            }

            /**
            * Name 删除记录
            */
            function remove(){
            $.messager.confirm('信息提示','确定要删除该记录？', function(result){
            if(result){
            var item = $('#data-datagrid').datagrid('getSelected');//获取选中的那一行
            if(item==null||item.length==0){
            $.messager.alert('提示信息','请选择要修改的角色','info');
            return;
            }
            $.ajax({
            url:'../../admin/role/delete',
            dataType:'json',
            type:'post',
            data:{id:item.id},
            success:function(data){
            if(data.type == 'success'){
            $.messager.alert('信息提示','删除成功！','info');
            $('#data-datagrid').datagrid('reload');
            }
            else
            {
            $.messager.alert('信息提示',data.msg,'info');
            }
            }
            });
            }
            });
            }

            /**
            * Name 打开添加窗口
            */
            function openAdd(){
            $('#add-form').form('clear');
            $('#add-dialog').dialog({
            closed: false,
            modal:true,
            title: "添加信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: add
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#add-dialog').dialog('close');
            }
            }]
            });
            }

            /**
            * Name 打开修改窗口
            */
            function openEdit(){
            $('#edit-form').form('clear');
            var item = $('#data-datagrid').datagrid('getSelected');//获取选中的那一行
            if(item==null||item.length==0){
                $.messager.alert('提示信息','请选择要修改的角色','info');
                return;
        }

            $('#edit-dialog').dialog({
            closed: false,
            modal:true,
            title: "修改信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: edit
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#edit-dialog').dialog('close');
            }
            }],
        //打开前执行
            onBeforeOpen:function() {
                $("#edit-id").val(item.id);
                $('#edit-name').val(item.name);
                $('#edit-remark').val(item.remark);

        }
            });
            }

            /**
            * Name 分页过滤器
            */
            function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
            data = {
            total: data.length,
            rows: data
            }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
            onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
            dg.datagrid('loadData',data);
            }
            });
            if (!data.originalRows){
            data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
            }

            //搜索按钮监听
            $("#search-btn").click(function(){
            $('#data-datagrid').datagrid('reload',{
            name:$("#search-name").val()
            });
            });
                /**
                * Name 载入数据
                */
            $('#data-datagrid').datagrid({
            url:'../../admin/role/list',
            //loadFilter:pagerFilter,
            rownumbers:true,
            singleSelect:true,
            pageSize:20,
            pagination:true,
            multiSort:true,
            fitColumns:true,
            fit:true,
            idField:'id',
            treeField:'name',
            columns:[[
            { field:'chk',checkbox:true},
            { field:'name',title:'角色名称',width:100,sortable:true},
            { field:'remark',title:'角色备注',width:180,sortable:true},
            { field:'icon',title:'权限操作',width:100,formatter:function(value,row,index){
        var test = '<a class="authority-edit" onclick="selectAuthority('+row.id+')"></a>'
        return test;
        }},
            ]],
                onLoadSuccess:function(data){
                    $('.authority-edit').linkbutton({text:'编辑权限',plain:true,iconCls:'icon-edit'});
                }
            });
            </script>